<template>
  <div id="books">
    <div class="search">
      <input
        type="text"
        placeholder="请输入搜索联系人"
        v-model="search">
      <span class="search_icon"><i class="fa fa-search"></i></span>
    </div>
    <div class="selected_wrap">
      <p class="total">共有 11 个联系人</p>
      <div class="select">
        <div class="select_item">
          <input type="radio" name="contacts" checked @click="selectedId=0">所有联系人
        </div>
        <div class="select_item">
          <input type="radio" name="contacts" @click="selectedId=1">亲人
        </div>
        <div class="select_item">
          <input type="radio" name="contacts" @click="selectedId=2">朋友
        </div>
        <div class="select_item">
          <input type="radio" name="contacts" @click="selectedId=3">同学
        </div>
      </div>
    </div>
    <div class="contact_list_wrap" v-if="newBooks.length">
      <div class="contact_list" >
        <peopleHub
          v-for="item in newBooks" :key="item.id"
          :item="item">
        </peopleHub>
      </div>
    </div>
    <p class="no_list" v-else>没有联系人</p>

    <div class="backTop">
      <a href="javascript:scrollTo(0, 0);">
        <i class="fa fa-arrow-up"></i>
      </a>
    </div>
  </div>
</template>

<script>
import peopleHub from './PeopleHub'

export default {
  name: 'books',
  components: {
    peopleHub
  },
  props: [ 'books' ],
  data() {
    return {
      search: '',
      selectedId: 0
    }
  },
  computed: {
    newBooks: function() {
      let newArr = []

      if(this.books.length==0) {
        return ''
      }
      
      switch (this.selectedId) {
        case 0:
          newArr = this.books;
          break;
        case 1:
          newArr = this.books.filter(item => {
            return item.status === '亲人'
          })
          break;
        case 2:
          newArr = this.books.filter(item => {
            return item.status === '朋友'
          })
          break;
        case 3:
          newArr = this.books.filter(item => {
            return item.status === '同学'
          })
          break;
      }
      if(this.search) {
        return newArr.filter(item => {
          return item.name.toLowerCase().indexOf(this.search) != -1
        })
      } else {
        return newArr
      }
    }
  }
}
</script>

<style lang="less" scoped>
#books {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;

  .search {
    margin-top: 40px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    input {
      width: 400px;
      height: 45px;
      border: 2px solid #eee;
      border-right: 0;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      padding-left: 10px;
      font-size: 16px;
    }
    @media screen and (min-width: 1024px){
      input {
        width: 640px;
      }
    }
    @media screen and (max-width: 600px){
      input {
        width: 200px;
      }
    }
    @media screen and (max-width: 320px){
      input{
        width: 150px;
      }
    }
    .search_icon {
      width: 45px;
      height: 45px;
      color: #555;
      font-size: 16px;
      border: 2px solid #eee;
      border-left: 0;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      margin-left: -2px;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  @media screen and (max-width: 600px){
    .search {
      margin-top: 20px;
    }
  }

  .selected_wrap {
    width: 445px;
    padding-left: 5px;
    .total {
      font-size: 13px;
      margin: 10px 0;
    }
    .select {
      font-size: 16px;
      display: flex;
      flex-wrap: wrap;
      .select_item {
        margin-right: 8px;
        input {
          margin-right: 3px;
          display: inline-block;
          cursor: pointer;
        }
      }
    }
  }
  .contact_list_wrap {
    width: 445px;
    height: auto;
    margin-top: 40px;
    .contact_list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }
  }
  @media screen and (min-width: 1024px){
    .selected_wrap,
    .contact_list_wrap {
      width: 685px;
    }
  }
  @media screen and (max-width: 600px){
    .selected_wrap,
    .contact_list_wrap {
      width: 245px;
    }
  }
  @media screen and (max-width: 320px){
    .selected_wrap,
    .contact_list_wrap {
      width: 195px;
    }
  }

  p.no_list {
    font-size: 33px;
    margin-top: 100px;
  }
  .backTop {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 80px;
    right: 90px;
    z-index: 10;
    cursor: pointer;
    a {
      color: #fff;
      font-size: 24px;
    }
  }
}

</style>